<template>
  <div class="nav_menu">
    <el-menu :default-active="active" :default-openeds="[0]" router text-color="#000" active-text-color="#409eff">
      <el-sub-menu v-for="(menu, index) in props.data" :key="index" :index="index + ''">
        <template #title>{{ menu.title }}</template>
        <el-menu-item-group>
          <el-menu-item v-for="(item, inds) in menu.itemList" :key="inds" :index="item.route">
            {{ item.title }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
  data: {
    type: Array,
    required: true
  }
})
const active = computed(() => {
  if (route.meta.activeSubMenu != null) {
    const multiple = route.meta.activeSubMenu.split(",")
    if (multiple.length > 0) {
      for (const r of multiple) {
        if (props.data.indexOf(r) != -1) {
          return r
        }
      }
      return multiple[0]
    }
  }
  return route.meta.activeSubMenu
})
</script>

<style lang="scss">
.nav_menu {
  height: 100%;

  .el-menu {
    height: 100%;
  }

  .el-sub-menu__title {
    font-weight: bold;
  }

  .el-sub-menu .el-menu-item {
    min-width: 170px;
  }

  .el-menu-item-group {
    background-color: #fbfbfb;
  }
}
</style>
